<template>
    <div class="project-icon-elpopover">
            <el-popover placement="bottom" width="300" height="60" trigger="click" slot="append">
                <!--                颜色选择器-->
                <el-row>
                    <el-col v-for="(item,index) in iconcolors" :key=index :span="3">
                        <v-btn @click="selectIconColors(item.color, index)" icon>
                            <v-icon :style="'color:' + item.color" v-show="item.selected === false">fa-circle-o</v-icon>
                            <v-icon :style="'color:' + item.color" v-show="item.selected === true">fa-check-circle</v-icon>
                        </v-btn>
                    </el-col>
                </el-row>
                <!--                图标选择器-->
                <el-row style="margin-left: 8px;">
                    <el-col v-for="(item,index) in icons" :key=index :span="4">
                        <v-btn @click="selectIcon(item)" icon>
                            <v-icon :style="'color:' + getColor()">{{item}}</v-icon>
                        </v-btn>
                    </el-col>
                </el-row>
                <el-button size="small" slot="reference" title="选择图标">
                    <v-icon :style="'color:' + getColor()">{{iconStr}}</v-icon>
                </el-button>
            </el-popover>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
    import {Environment} from "@/environments/environment";
    import {Subject, Unsubscribable} from "rxjs";

    @Component({})
    export default class AppProjecticon extends Vue {

        /**
         * 表单状态
         *
         * @type {Subject<any>}
         * @memberof AppImagePreview
         */
        @Prop() public formState?: Subject<any>

        /**
         * 初始化值
         *
         * @type {*}
         * @memberof AppImagePreview
         */
        @Prop() public value?: any;

        /**
         * 所属表单项名称
         *
         * @type {string}
         * @memberof AppImageUpload
         */
        @Prop() public name!: string;

        /**
         * 是否禁用
         *
         * @type {boolean}
         * @memberof AppImageUpload
         */
        @Prop() public disabled?: boolean;

        /**
         * 上传参数
         *
         * @type {string}
         * @memberof AppImageUpload
         */
        @Prop() public uploadparams?: string;

        /**
         * 下载参数
         *
         * @type {string}
         * @memberof AppImageUpload
         */
        @Prop() public exportparams?: string;


        /**
         * 表单状态事件
         *
         * @private
         * @type {(Unsubscribable | undefined)}
         * @memberof AppImagePreview
         */
        private formStateEvent: Unsubscribable | undefined;

        /**
         * 颜色数组
         */
        public iconcolors = [{color: '#9E9E9E', selected: true},
            {color: '#CDDC39', selected: false},
            {color: '#FF9800', selected: false},
            {color: '#607D8B', selected: false},
            {color: '#FF5722', selected: false},
            {color: '#81C784', selected: false},
            {color: '#00838F', selected: false},
            {color: '#00897B', selected: false}];

        /**
         * icon数组
         */
        public icons = ["fa fa-camera-retro", "fa fa-address-book", "fa fa-address-book-o", "fa fa-address-card", "fa fa-address-card-o", "fa fa-adjust", "fa fa-adn"
            , "fa-window-restore", "fa-window-close", "fa-user-circle-o", 'fa-thermometer-1', "fa-superpowers", "fa-ravelry", "fa-assistive-listening-systems", "fa-arrows"
            , "fa-arrows-h", "fa-asterisk", "fa-balance-scale", "fa-bar-chart-o",'fa-bookmark-o','fa-building','fa-bus','fa-commenting','fa-cloud-upload', 'fa-cog'];

        /**
         * 颜色值
         */
        public colorstr: any = '#949491';

        /**
         * 图标值字符串
         */
        public iconStr: any = 'fa fa-camera-retro';

        /**
         * 选择颜色
         */
        public selectIconColors(color: any, index: any) {
            this.colorstr = color;
            for (let i = 0; i < this.iconcolors.length; i++) {
                this.iconcolors[i].selected = false;
            }
            this.iconcolors[index].selected = true;
            this.$forceUpdate();
        }

        /**
         * 获取颜色
         */
        getColor() {
            if (this.colorstr) {
                return this.colorstr;
            }
            return '';
        }


        /**
         * 数据值变化
         *
         * @param {*} newval
         * @param {*} val
         * @returns
         * @memberof AppImagePreview
         */
        @Watch('value')
        onValueChange(newval: any, val: any) {
            let json = JSON.parse(newval);
            if (newval && json) {
                this.iconStr = json.icon;
                this.colorstr = json.color;
            }
        }

        /**
         * vue 生命周期
         *
         * @memberof AppImagePreview
         */
        public created() {
            if (this.formState) {
                this.formStateEvent = this.formState.subscribe(($event: any) => {
                    // 表单加载完成
                    if (Object.is($event.type, 'load')) {
                        let json = JSON.parse(this.value);
                        if (this.value && json) {
                            this.iconStr = json.icon;
                            this.colorstr = json.color;
                        }
                    }
                });
            }
        }


        /**
         * 选择
         */
        public selectIcon(icon: any) {
            let valueicon = {icon: icon, color: this.colorstr};
            let arg = {name: this.name, value: JSON.stringify(valueicon)};
            this.$emit('formitemvaluechange', arg);
        }


    }
</script>

<style lang='less'>
    @import './app-projecticon.less';
</style>